<template>
	<view class="container">
		<view class="referralCode" v-if="joinType == 'scan' ? true : false">
			<view style="border-radius: 40rpx;overflow: hidden;">
				<u-image width='220rpx' height='220rpx' :src="clientInfo.logo"></u-image>
			</view>
			<text>邀请码：{{form.referralCode}}</text>
		</view>
		<view class="form">
			<u-form :model="form"  ref="form" labelPosition="top" labelWidth='200rpx'>
				<u-form-item label="推荐码" prop="referralCode" borderBottom ref="referralCode" v-if="config.scene == 'reg' & joinType != 'scan'">
					<u-input v-model="form.referralCode" border="none" placeholder='请输入推荐码'></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone" borderBottom ref="phone">
					<u-input v-model="form.phone" border="none" :placeholder='config.phonePlaceHolder'></u-input>
				</u-form-item>
				<u-form-item label="密码" prop="password" borderBottom ref="password">
					<u-input v-model="form.password" border="none" placeholder='请输入密码'></u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="verifiyCode" borderBottom ref="verifiyCode" v-if='isNeedVerifiyCode'>
					<u-input v-model="form.verifiyCode" border="none" placeholder='请输入验证码' maxlength='6'></u-input>
					<view class="" slot='right'>
						<view v-if="count == 60" class="getVerifiyCode" @click="getVerifiyCode">获取验证码</view>
						<view style="color: #999999;" v-else>重新发送({{count}})</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<!-- <text class="message">测试阶段默认验证码为123456</text> -->
		<jc-button :title='config.submitTitle' style="margin-top: 100rpx;" backgroundColor="#FC5E53" color='#ffffff' @click="submit"></jc-button>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
	</view>
</template>

<script>
	import md5 from 'js-md5'
	import {user} from '@/api/user.js'
	import {common} from '@/api/common.js'
	import jcNavbar from "@/components/jc-nav-bar/jc-nav-bar.vue"
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default{
		components:{ jcNavbar, simpleAddress},
		data() {
			return {
				timer:'',
				config: {},
				form: {
					phone: '',
					password: '',
					verifiyCode: '',
					referralCode: '',
					area: ''
				},
				count: 60,
				joinType: '',
				cityPickerValueDefault: [0, 0, 1],
				clientname: '',
				openshop: '',
				clientInfo: {},
				isNeedVerifiyCode: true
			}
		},
		onLoad(options) {
			if(options.scene == 'resetPwd'){
				this.config = {
					scene: 'resetPwd',
					title: '忘记密码',
					phonePlaceHolder: '注册时使用的手机号',
					submitTitle: '重置'
				}
			}else if(options.scene == 'reg'){
				this.config = {
					scene: 'reg',
					title: '注册',
					phonePlaceHolder: '请输入手机号',
					submitTitle: '注册'
				}
			}
			if(options.parentCode){
				this.joinType = 'scan'
				this.form.referralCode = options.parentCode
				this.config = {
					scene: 'reg',
					title: '注册',
					phonePlaceHolder: '请输入手机号',
					submitTitle: '注册'
				}
			}
			if(options.clientname){
				this.clientname = options.clientname
			}
			this.findClientInfo()
			uni.setNavigationBarTitle({
				title: this.config.title
			})
		},
		onHide() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			//选择地区事件
			inputAreaTap(){
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.form.area = e.label.replace(/-/g,'，');
			},
			submit(){
				// 不要验证推荐吗
				if(!this.$verify.phone(this.form.phone) && this.form.phone != 'admin'){
					this.$show.showMessage('请输入正确的手机号')
				}else{
					if(this.config.scene == 'resetPwd'){
						this.resetPwd()
					}else if(this.config.scene == 'reg'){
						this.reg()
					}
				}
			},
			reg(){
				let that = this
				user.phoneReg({
					"phone": this.form.phone,
					"password": this.form.password ? md5(this.form.password) : '',
					"parentCode" : this.form.referralCode,
					"verifiyCode": this.form.verifiyCode,
					"openshop": this.openshop
				}).then(res => {
					// #ifdef APP-PLUS
					if(res.data.code == 10000) {
						console.log('注册成功')
						//记住账号
						that.$storage.setStorageDataSync('phone', that.form.phone)
						uni.navigateBack()
						that.$show.showMessage('注册成功，请登录')
					}else if(res.data.code == 10001){
						that.$show.showMessage('该手机号已注册，请返回直接登录')
					}
					// #endif
					// #ifdef MP-WEIXIN
					if(res.data.code == 10000) {
						console.log('注册成功')
						that.$show.showMessage('注册成功，请登录')
						//记住账号
						that.$storage.setStorageDataSync('phone', that.form.phone)
						uni.navigateBack()
					}else if(res.data.code == 10001) {
						console.log('注册成功')
						//记住账号
						that.$show.showMessage('该手机号已注册，请返回直接登录')
					}
					// #endif
					// #ifdef H5
					if(res.data.code == 10000) {
						console.log('注册成功')
						//记住账号
						that.$storage.setStorageDataSync('phone', that.form.phone)
						if(that.clientInfo.updateUrlForAndriod){
							that.$Router.push({
								name: 'install'
							})
						}else{
							that.$Router.push({
								name: 'miniproCode'
							})
						}
					}else if(res.data.code == 10001){
						uni.showModal({
							content: '该手机号已存在，是否获取程序入口',
							confirmText: '确定',
							cancelText: '取消',
							success(_res) {
								if(_res.confirm){
									if(that.clientInfo.updateUrlForAndriod){
										that.$Router.push({
											name: 'install'
										})
									}else{
										that.$Router.push({
											name: 'miniproCode'
										})
									}
								}
							}
							
						})
					}
					// #endif
					
				})
				
			},
			resetPwd(){
				let that = this
				user.resetPwd({
					"phone": this.form.phone,
					"password": md5(this.form.password),
					"verifiyCode": this.form.verifiyCode
				}).then(res => {
					if(res.data.code == 10000) {
						console.log('修改成功')
						//记住账号
						that.$storage.setStorageDataSync('phone', that.form.phone)
						uni.navigateBack()
						that.$show.showMessage('重置成功')
					}
				})
			},
			getVerifiyCode(){
				console.log('获取验证码')
				var that = this
				common.sendSms({
					"phone": this.form.phone
				}).then(res => {
					if(res.data.code == 10000) {
						this.count = 59
						that.timer = setInterval(() => {
							that.count--
							if(that.count==0) {
								clearInterval(that.timer)
								that.count = 60
							}
						},1000)
					}
				})				
			},
			//请求APP配置接口
			findClientInfo() {
				common.findClientInfo({
					clientname: this.clientname
				}).then(res => {
					if(res.data.code == 10000){
						this.openshop = res.data.data.openshop
						this.clientInfo = res.data.data
						this.$storage.setStorageDataSync('clientInfo_reg', res.data.data)
						
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 100rpx;
		background-color: #FFFFFF;
	}
	.referralCode{
		font-weight: bold;
		font-size: 34rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text{
			margin-top: 20rpx;
		}
	}
	.form{
		width: 600rpx;
		margin-top: 100rpx;
		margin-left: 50rpx;
	}
	.submit{
		width: 600rpx;
		height: 90rpx;
		margin-top: 50rpx;
	}
	.getVerifiyCode{
		color: st-color-primary;
	}
	.message{
		color: red;
		text-align: left;
		width: 100%;
		padding: 10px 20rpx;
		font-size: 24rpx;
	}
</style>
